<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/axios.min.js"></script>
  <script src="js/query.js"></script>
  <script>
    window.onload = function (){
      setLoginInfo();
      findByItem(1);
    }

    function  findByItem(pageNO){
      axios.get("/product/findByItem",{
        params: {
          pageNO,
          name:$("nameTxt").value
        }
      }).then(resp =>{
        var info = resp.data;
        var str = "";
        info.list.forEach(n =>{
          str += `<div style="width: 200px;height: 300px;">
                        <img src='/img/product/${n.imgPath}' width="100" height="100"><br>
                        商品名：${n.name}<br>
                        单价：${n.price}<br>
                        评论：${n.speakNum}<br>
                        <input type="button" value="查看" onclick="location.href='/speak.html?id=${n.id}'">
                        </div>`;
        });
        $("productDiv").innerHTML = str;

        var cutStr = "";
        for(var i=1;i<=info.totalPage;i++){
          cutStr += `<a href="javascript:findByItem(${i})" style="margin-left: 10px">${i}</a>`;
        }

        $("cutDiv").innerHTML = cutStr;
      })
    }

    /**
     * 显示登陆信息
     */
    function setLoginInfo(){
      axios.get("/user/getLoginUser").then(resp=>{
        var info = resp.data;
        if(info == ''){
          $("loginDiv").innerHTML = "对不起，请先<a href='/login.html'>登陆</a>";
        }
        else{
          $("loginDiv").innerHTML = "欢迎光临，"+info.userName;
        }
      });
    }

  </script>
</head>
<body>
<div id="loginDiv"></div>
<div id="productDiv" style="display: flex;"></div>
<div id="cutDiv"></div>
商品名：<input type="text" id="nameTxt">
<input type="button" value="搜索" onclick="findByItem(1)">
</body>
</html>